<template>
  <div class="padding-top-10">
    <!-- <div class="padding-left-right-40 relative-box margin-top-bottom-10">
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="现金流入" name="yearIncomeCash" key="yearIncomeCash"> </el-tab-pane>
        <el-tab-pane label="权责收入" name="yearIncomeDuty" key="yearIncomeDuty"> </el-tab-pane>
      </el-tabs>
      <div class="btn-box">
        <el-button size="mini" type="primary" @click="exportFn">导出</el-button>
      </div>
    </div> -->
    <div class="padding-left-right-20 flex justify-between" style="width: 100%">
      <div class="font-size-18 font-weight-700">项目执行结果及预测</div>
      <el-button size="mini" type="primary" @click="exportFn">导出</el-button>
    </div>
    <div class="flex margin-top-20">
      <group-list ref="group" @cutItem="cutItem"></group-list>
      <table-list ref="table" :tableType="activeName" :dataList="dataList" class="flex-1 margin-left-20"></table-list>
    </div>
  </div>
</template>
<script>
  import lodash from 'lodash';
  import { toFixedTwo, uploadLoad } from '@/common/js/utils';
  import groupList from '../components/groupList.vue';
  import tableList from '../components/tableList.vue';
  import { apiPlanYearforecast, apiPlanYearforecastExport } from '@a/about';

  export default {
    props: {
      chartsData: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    data() {
      return {
        dataList: [],
        activeName: 'yearIncomeCash',
      };
    },
    methods: {
      async getInfo() {
        let res = await apiPlanYearforecast({
          year: this.$route.query.year,
          projectKeys: this.projectKey ? [this.projectKey] : null,
          fundsType: 1, //收入1/支出2
          amountType: this.activeName == 'yearIncomeCash' ? 1 : 2, //现金流1/权责2
        });
        res.rows.forEach(item => {
          item.className = item.type;
          item.allMoney1 = item.yearAmountTotal;
          item.allMoney2 = item.lastYearAmountTotal;
          item.diffAmont = item.differenceAmount;
          item.diffRate = item.differenceRate;
        });
        this.dataList = res.rows || [];
      },

      exportFn() {
        apiPlanYearforecastExport({
          year: this.$route.query.year,
          projectKeys: this.projectKey ? [this.projectKey] : null,
          fundsType: 1, //收入1/支出2
          amountType: this.activeName == 'yearIncomeCash' ? 1 : 2, //现金流1/权责2
        }).then(res => {});
      },

      cutItem(key) {
        this.projectKey = key;
        this.getInfo();
      },

      tabClick(row) {
        this.activeName = row.name;
        this.getInfo();
      },
    },

    mounted() {},

    components: { groupList, tableList },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-table__header th {
    background: rgba($color: #f8f8f8, $alpha: 1);
  }
  .border-line {
    border-bottom: 1px solid #e5e5e5;
  }
  .btn-box {
    position: absolute;
    right: 20px;
    top: 5px;
  }
</style>
